<template>
  <div class="content-detail list-page">
    <el-card class="card-box">
      <div class="card-box--headerwrap">
        <el-page-header
          icon="el-icon-arrow-left"
          content="填写-施工试验&见证检测"
          @back="handleBack"
        ></el-page-header>
      </div>
    </el-card>

    <el-card class="card-box">
      <el-descriptions
        :column="3"
        size="large"
        title="基础信息"
        class="descriptions"
      >
        <el-descriptions-item
          labelClassName="right-align"
          class-name="my-content"
          label="单体信息"
          >{{ detailData.monomerName }}</el-descriptions-item
        >
        <el-descriptions-item
          labelClassName="right-align"
          class-name="my-content"
          label="工程类型"
          >{{ detailData.atypeName }}</el-descriptions-item
        >
        <el-descriptions-item
          labelClassName="right-align"
          class-name="my-content"
          label="分部"
          >{{ detailData.a1TypeName }}</el-descriptions-item
        >
      </el-descriptions>
    </el-card>

    <el-card class="card-box card-table">
      <template #header>
        <div class="card-header">
          <span>施工试验&见证检测</span>
          <div>
            <template v-if="isShowCheckbox">
              <el-button size="small" plain @click="isShowCheckbox = false"
                >取消</el-button
              >
            </template>

            <template v-if="!isShowCheckbox">
              <el-button
                type="primary"
                size="small"
                v-auth="`/projectsS/witness--start`"
                @click="isShowCheckbox = true"
                >批量启动</el-button
              >
            </template>

            <template v-if="isShowCheckbox">
              <el-button type="primary" size="small" @click="handleStart(1)"
                >确认启动</el-button
              >
            </template>
          </div>
        </div>
      </template>

      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          @select="handleSelectionChange"
          @select-all="handleSelectionAll"
          ref="multipleTable"
          :data="tableData"
          stripe
          :row-key="getRowKeys"
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{
            background: '#F7F9FD',
            color: '#000',
            height: '48px',
            borderTop: '1px soild #E4E8F2'
          }"
          max-height="520"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50"
            v-if="isShowCheckbox"
          />
          <el-table-column type="index" label="序号" width="80">
            <template v-slot="scope">
              <span>{{
                (pageState.pageNum - 1) * pageState.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="witnessName" label="验收记录">
            <template #default="{ row }">
              <span>{{ row.witnessName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="已完成/总验收" width="200">
            <template #default="{ row }">
              <span class="times" @click="handleList(row)"
                >{{ row.insFinishTimes }}/{{ row.insTimes }}</span
              >
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            v-if="!isShowCheckbox"
            width="120"
          >
            <template #default="{ row }">
              <el-button
                class="add"
                type="text"
                size="small"
                @click="handleStart(2, row)"
                v-auth="`/projectsS/witness--start`"
                >启动</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-skeleton>
    </el-card>

    <!-- 启动 -->
    <start-check
      :checkTable="checkTable"
      :title="title"
      v-if="showStartCheck"
      @handleCancel="handleCancel"
      @handleSure="handleSure"
    ></start-check>

    <!-- 查看材料验收记录 -->
    <el-dialog
      v-model="showCheckList"
      title="查看验收数据"
      width="70%"
      destroy-on-close
      custom-class="check-list"
    >
      <check-list :checkItem="checkItem" @closeList="closeList"></check-list>
    </el-dialog>

    <!-- 历史验收详情 -->
    <el-dialog
      v-model="showCheckDetail"
      title="验收数据详情"
      width="52%"
      destroy-on-close
      custom-class="check-list check-color"
    >
      <check-detail
        @closeDetail="closeDetail"
        :instanceId="instanceId"
      ></check-detail>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from "vue-router";
import { defineComponent, reactive, ref } from "vue";
import NotifMessage from "/@/utils/message/notification";
import startCheck from "../components/startCheck.vue";
import checkList from "../components/checkList.vue";
import checkDetail from "../../components/checkDetail.vue";
import {
  witnessInfo,
  witnessItemList,
  witnessBatchStart
} from "/@/api/construction";
export default defineComponent({
  name: "fill",
  components: { startCheck, checkList, checkDetail },
  setup() {
    const multipleTable = ref<HTMLFormElement | null>(null) as any;
    const router = useRouter();
    const route = useRoute();
    const checkTable = ref([]);
    const tableData = ref([]);
    let detailData = ref({});
    let queryId = route.query.id;
    const title = ref("启动");
    const instanceId = ref();
    const checkItem = ref({});
    const showStartCheck = ref<boolean>(false);
    const showCheckList = ref<boolean>(false);
    const showCheckDetail = ref<boolean>(false);
    const loading = ref<boolean>(false);
    const isShowCheckbox = ref<boolean>(false);
    const pageState = reactive({
      pageNum: 1,
      pageSize: 500
    });

    // 获取检查项列表
    async function getCheckItemList() {
      try {
        loading.value = true;
        let postData = { witnessId: +queryId, isShow: 1 };
        const { code, data } = await witnessItemList({
          ...pageState,
          ...postData
        });
        if (code === 200) {
          tableData.value = data?.list;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    // 获取验收详情
    const getCheckDetail = async () => {
      try {
        let postData = { id: queryId };
        const { code, data } = await witnessInfo(postData);
        if (code === 200) {
          detailData.value = data;
        }
      } catch (err) {
        console.log(err);
      }
    };

    //启动
    const handleStart = (type, row = {}) => {
      if (type === 1) {
        if (!checkTable.value?.length) {
          NotifMessage.info("请选择需要启动的验收项");
          return;
        }
        title.value = "批量启动";
      } else {
        multipleTable.value!.clearSelection();
        checkTable.value = [];
        checkTable.value = [row];
        title.value = "启动";
      }
      showStartCheck.value = true;
    };

    //启动验收
    const handleSure = async params => {
      const poatDate = { ...params };
      poatDate.partybHandlerId = poatDate?.partybHandlerInfo?.value;
      poatDate.partybHandlerName = poatDate?.partybHandlerInfo?.label;
      try {
        const { code, message } = await witnessBatchStart(poatDate);
        if (code === 200) {
          getCheckItemList();
          showStartCheck.value = false;
          NotifMessage.success(message);
        } else {
          message && NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    //查看验收记录
    const handleList = row => {
      checkItem.value = row;
      showCheckList.value = true;
    };

    const getRowKeys = row => {
      return row.id;
    };

    const handleSelectionChange = val => {
      checkTable.value = [];
      checkTable.value = val;
    };

    const handleSelectionAll = val => {
      checkTable.value = [];
      checkTable.value = val;
    };

    // 返回按钮事件
    const handleBack = () => {
      router.push("/projectsS/construction/witness");
    };

    const closeList = type => {
      showCheckDetail.value = true;
      instanceId.value = type;
    };

    const closeDetail = () => {
      showCheckDetail.value = false;
    };

    const handleCancel = () => {
      checkTable.value = [];
      multipleTable.value!.clearSelection();
      showStartCheck.value = false;
    };

    if (queryId) {
      getCheckDetail();
      getCheckItemList();
    }

    return {
      multipleTable,
      tableData,
      handleBack,
      showStartCheck,
      showCheckList,
      showCheckDetail,
      detailData,
      pageState,
      loading,
      handleStart,
      handleList,
      checkItem,
      handleSure,
      closeList,
      closeDetail,
      handleCancel,
      instanceId,
      title,
      handleSelectionChange,
      handleSelectionAll,
      getRowKeys,
      checkTable,
      isShowCheckbox
    };
  }
});
</script>

<style lang="scss" scoped>
.descriptions {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #494c53;
  :deep .el-descriptions__header {
    padding: 14px 0 14px 16px;
    border-bottom: 1px solid #c2cade;
  }
  :deep .my-content {
    min-width: 200px;
    padding: 6px 0 6px 12px;
    background: #fdfdff;
    border-radius: 4px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8895b7;
    font-size: 14px;
    display: inline-block;
  }
}
.card-table {
  height: calc(100% - 48px - 140px);
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #494c53;
    }
  }
  :deep .el-card__body {
    padding: 16px;
    height: calc(100% - 50px);
    .times {
      color: #5298ff;
      cursor: pointer;
    }
  }
  .el-button.add {
    background: transparent;
    padding-left: 0;
  }
}
:deep .add-check {
  .el-dialog__body {
    padding: 20px 40px 8px 10px;
  }
}
:deep .check-list {
  .el-dialog__body {
    padding: 16px;
  }
}
:deep .check-color {
  .el-dialog__body {
    background: #fdfdff;
  }
}
.other-colum {
  display: flex;
  align-items: center;
}
.el-icon-question {
  cursor: pointer;
  margin-left: 2px;
}

:deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: unset !important;
}
:deep .el-table td.el-table__cell {
  border: unset !important;
}
:deep .el-table.el-table--small {
  border: unset !important;
}

:deep .el-dialog .el-dialog__header {
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}
:deep .el-table::before {
  display: none;
}
</style>
